import { tableData1 } from './js/table'
import {
    newRecordOptions
} from './js/myCharts'

export default {
    name: "BudgetManage",
    data () {
        return {
            imgList: [
                {
                    id: 0,
                    icon: require('@/assets/images/search.png'),
                    iconActive: require('@/assets/images/search-active.png')
                }, {
                    id: 1,
                    icon: require('@/assets/images/import.png'),
                    iconActive: require('@/assets/images/import-active.png')
                }, {
                    id: 2,
                    icon: require('@/assets/images/export.png'),
                    iconActive: require('@/assets/images/export-active.png')
                }, {
                    id: 3,
                    icon: require('@/assets/images/statistics.png'),
                    iconActive: require('@/assets/images/statistics-active.png')
                }, {
                    id: 4,
                    icon: require('@/assets/images/delete.png'),
                    iconActive: require('@/assets/images/delete-active.png')
                }
            ], // 图标集合
            navList: [
                { id: 0, name: '全部' },
            ], // 导航集合
            hoverIndex: -1, // 头部当前hover图标
            currentNav: '', // 当前导航
            currentTable: '', // 当前table
            // 列表数据
            tableData1: [],
            uploadDialogVisible: false, // 上传Excel弹框是否显示
            exportDialogVisible: false, // 导出Excel弹框是否显示
            // 导出弹框:选中导出字段
            allChecked: ["预算名称", "数量", "金额", "关联项目", "主事部门", "拥有者", "创建人", "创建时间", "最近修改时间"],
            // 导出弹框:全部导出字段
            checkList: ["预算名称", "数量", "金额", "关联项目", "主事部门", "拥有者", "创建人", "创建时间", "最近修改时间"],
            // 导出弹框:是否全选
            checkAll: true,
            // 导出弹框:checkbox 的不确定状态
            isIndeterminate: false,
            statisticsDrawer: false, // 统计抽屉,
            createDialogVisible: false, // 新增记录弹框是否显示
            newRecordForm: {
                budgetName: '',
                budgetNum: '',
                budgetAmount: '',
                relatedItems: '',
                mainDpt: '',
                enclosure: ''
            }, // 新建记录表单对象
            detailDialogVisible: false, // 详情弹框是否显示
            rowValueForm: {
                budgetName: '',
                budgetNum: '',
                budgetAmount: '',
                relatedItems: '',
                mainDpt: '',
                enclosure: '',
                owner: '',
                creater: '',
                createTime: '',
                updateTime: ''
            }, // table行详情表单对象
            titles: ["项目名称", "项目状态", "项目编号", "开始日期"], // 详情弹框：右侧table头部
            lines: [
            	{projectName:"S客户考察公司",status:"进行中",numbers:"001",time:"2019-08-29"},
            ], // 详情弹框：右侧table内容
            checked: false, // 详情弹框：是否保存后新增下一条
            fileList: []
        }
    },
    computed: {
        newRecordOptions () {
            return newRecordOptions
        }
    },
    mounted () {
        this.tableData1 = tableData1;
    },
    methods: {
        /**
         * 鼠标移出
         * @param index
         */
        mouseLeave: function (index) {
            this.hoverIndex = index
        },
        /**
         * 鼠标移入
         * @param index
         */
        mouseEnter: function (index) {
            this.hoverIndex = index
        },
        /**
         * 头部图标点击时触发
         * @param id
         */
        iconClick (id) {
            if (id === 1) {
                this.uploadDialogVisible = true
            } else if (id === 2) {
                this.exportDialogVisible = true
            } else if (id === 3) {
                this.statisticsDrawer = true
                this.$nextTick(() => {
                    this.initCharts()
                })
            } else if (id === 4) {
                this.$confirm('您确定要删除这条记录?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                        this.tableData1.splice(0, 1);
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }
                ).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        },
        /**
         * 导航切换
         * @param index
         */
        switchNav (index) {
            this.currentNav = index
        },
        /**
         * 点击某行数据触发显示行详情
         * @param val
         */
        handleRow (val) {
            this.rowValueForm = val;
            this.detailDialogVisible = true;
        },
        /**
         * 导入文件
         */
        uploadExcel () {
            // if (this.currentNav == 1) {
            //     this.tableData2 = tableData5;
            // } else if (this.currentNav == 2) {
            //     this.tableData3 = tableData6;
            // } else {
            //     this.tableData1 = tableData4;
            // }
            // this.uploadDialogVisible = false;
        },
        /**
         * 导出弹框：导出字段全选框改变时触发
         * @param val
         */
        handleCheckAllChange (val) {
            this.allChecked = val ? this.checkList : [];
        },
        /**
         * 导出弹框：导出字段checkbox改变时触发
         * @param value
         */
        handleCheckedFieldsChange (value) {
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.checkList.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.checkList.length;
        },
        /**
         * 统计：初始化图表
         */
        initCharts () {
            // 每日新增项目图表
            let newRecordChart = this.$echarts.init(document.getElementById('newRecord'))
            newRecordChart.setOption(this.newRecordOptions)
        },
        /**
         * 新增项目
         */
        creatNew () {
            this.createDialogVisible = true;
        },
        /**
         * 上传附件-------------------------------------------------------
         */
        handleRemove (file, fileList) {
            console.log(file, fileList);
        },
        handlePreview (file) {
            console.log(file);
        },
        handleExceed (files, fileList) {
            this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${ files.length } 个文件，共选择了 ${ files.length + fileList.length } 个文件`);
        },
        beforeRemove (file, fileList) {
            return this.$confirm(`确定移除 ${ file.name }？`);
        },
        /* --------------------------------------------------------------- */
    }
}
